<template>
	<section>
		<el-row>
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
				<el-form :inline="true" :model="filters">
					<el-form-item>
						<el-input v-model="filters.tradeNo" placeholder="订单号"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" v-on:click="getOrders">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleReset">重置</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>

		<el-table :data="list"  highlight-current-row v-loading="listLoading"  >
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="tradeNo" label="订单号" width="250"  >
			</el-table-column>
			<el-table-column prop="createTimeStr" label="下单时间" width="180"  >
			</el-table-column>
			<el-table-column prop="totalFee" label="订单总金额" width="120"  >
			</el-table-column>
			<el-table-column prop="status" label="订单状态" width="120"  :formatter="formatStatus" ></el-table-column>
			<el-table-column prop="refundState" label="有无退款" width="120"  :formatter="formatRefundState"  >
			</el-table-column>
			<el-table-column prop="receiverName" label="收货人" >
			</el-table-column>
			<el-table-column prop="receiverTel" label="收货人电话" width="144" >
			</el-table-column>
			<el-table-column prop="address" label="售后地址"  >
			</el-table-column>
			<el-table-column prop="action" label="操作" width="280"  >
				<template scope="scope">
					<el-button type="primary" size="small" @click="handleDetail(scope.$index, scope.row)">查看详情</el-button>
					<el-button type="success" v-if="scope.row.status < 2" size="small" @click="handleSend(scope.$index, scope.row)">发货</el-button>
					<el-button type="default" v-else size="small" :disabled="disable" >发货</el-button>
					<el-button type="warning" v-if="scope.row.status != 4" size="small" @click="handleFinish(scope.$index, scope.row)">完成</el-button>
					<el-button type="warning" v-else size="small" :disabled="disable" >完成</el-button>
					<el-button type="danger"  v-if="scope.row.status == 0 || scope.row.status == 5 "  size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
					<el-button type="default"  v-else size="small" :disabled="disable" >删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-col :span="24" class="toolbar">
			<template >
				<div class="block">
					<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="pager.page"
							:page-sizes="pager.sizes"
							:page-size="pager.limit"
							layout="total, sizes, prev, pager, next, jumper"
							:total="pager.totalPage">
					</el-pagination>
				</div>
			</template>
		</el-col>

		<el-dialog title="订单详情"   v-model = 'detailsVisible' >

			<el-dialog
					width="30%"
					title="拒绝退款"
					:visible.sync="rejectVisible"
					:modal=false
					append-to-body>

				<el-form :model="refundData" >
					<el-form-item label="拒绝原因" >
						<el-input v-model="refundData.refuseDesc" auto-complete="off" ></el-input>
					</el-form-item>
				</el-form>
				<div>
					<el-button @click.native="rejectVisible = false">取消</el-button>
					<el-button type="primary" @click.native="rejectSubmit" :loading="rejectLoading">提交</el-button>
				</div>
			</el-dialog>

			<el-collapse  v-model="activeNames" >
				<el-collapse-item title="订单信息"  name="1" >
					<el-form :model="orderData"  ref="orderData"  label-width="90px" >
						<el-row	>
							<el-col :span="8" >
								<el-form-item label="订单号" prop="title">
									<el-input v-model="orderData.tradeNo" auto-complete="off"  :disabled="disable" ></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="5" >
								<el-form-item label="总金额" prop="totalFee">
									<el-input v-model="orderData.totalFee"  auto-complete="off" :disabled="disable"  ></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="5" >
								<el-form-item label="订单状态" prop="refundState">
									<el-input v-model="status[orderData.status]" auto-complete="off" :disabled="disable"  ></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6" >
								<el-form-item label="退款状态" prop="refundState">
									<el-input v-model="refundState[orderData.refundState]" auto-complete="off" :disabled="disable"  ></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="6" >
								<el-form-item label="下单时间" prop="createTimeStr">
									<el-input v-model="orderData.createTimeStr||' - -   : : '" auto-complete="off" :disabled="disable"  ></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6" >
								<el-form-item label="支付时间" prop="sendTimeStr">
									<el-input v-model="orderData.payTimeStr||' - -   : : '" auto-complete="off" :disabled="disable"  ></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6" >
								<el-form-item label="发货时间" prop="sendTimeStr">
									<el-input v-model="orderData.sendTimeStr||' - -   : : '" auto-complete="off" :disabled="disable"  ></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6" >
								<el-form-item label="收货时间" prop="receiveTimeStr">
									<el-input v-model="orderData.receiveTimeStr||' - -   : : '" auto-complete="off" :disabled="disable"  ></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="6" >
								<el-form-item label="收货人" prop="receiverName">
									<el-input v-model="orderData.receiverName||' -- '" auto-complete="off" :disabled="disable"  ></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6" >
								<el-form-item label="收货人电话" prop="receiverTel">
									<el-input v-model="orderData.receiverTel" auto-complete="off" :disabled="disable"  ></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12" >
								<el-form-item label="收货地址" prop="address">
									<el-input v-model="orderData.address" auto-complete="off" :disabled="disable"  ></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="18" >
								<el-form-item label="买家备注" prop="customerDesc">
									<el-input v-model="orderData.customerDesc" auto-complete="off" :disabled="disable"  ></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="服务满意度" prop="erviceStar">
									<el-input v-model="orderData.erviceStar" auto-complete="off" :disabled="disable"  ></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="18" >
								<el-form-item label="评价内容" prop="evaluateDesc">
									<el-input v-model="orderData.evaluateDesc" auto-complete="off" :disabled="disable"  ></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="配送满意度" prop="expressStar">
									<el-input v-model="orderData.expressStar" auto-complete="off" :disabled="disable"  ></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</el-collapse-item>
				<el-collapse-item title="商品信息" name="2" >
					<el-table :data="orderData.orderDetails" >
						<el-table-column label="商品名称" prop="goodsName"  ></el-table-column>
						<el-table-column label="商品主图" prop="thumb" width="120"  >
							<template   slot-scope="scope">
								<img :src="renderImage(scope.row.thumb)" height="45" style="margin-top: 3px" />
							</template>
						</el-table-column>
						<el-table-column label="价格" prop="price" width="90" ></el-table-column>
						<el-table-column label="购数" prop="number" width="80" ></el-table-column>
						<el-table-column label="总价" prop="totalFee" width="90" ></el-table-column>
						<el-table-column label="退款" prop="refundState" width="80" :formatter="refundStateFormat" ></el-table-column>
						<el-table-column label="退数" prop="refundNo" width="70" ></el-table-column>
						<!--<el-table-column label="退款额" prop="refundAmount" ></el-table-column>-->
						<el-table-column label="退款说明" prop="refundDesc" ></el-table-column>
						<el-table-column label="操作" prop="action" width="144" fixed="right" >
							<template slot-scope="scope"  >
								<el-button v-if="scope.row.refundState == 1 && orderData.status != 4 " type="danger" size="small" @click="handleRefund(scope.$index, scope.row)">退款</el-button>
								<el-button v-else type="danger" size="small " :disabled="disable" >退款</el-button>
								<el-button v-if="scope.row.refundState == 1 && orderData.status != 4 "  type="warning" size="small" @click="handleReject(scope.$index, scope.row)">拒绝</el-button>
								<el-button v-else type="warning" size="small" :disabled="disable" >拒绝</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-collapse-item>
			</el-collapse>
		</el-dialog>

		<el-dialog title="发货" v-model="sendDialogVisible" >
			<el-form :model="orderData" label-width="80px" ref="orderData" :rules="sendModelRules" >
				<el-form-item label="订单号" prop="expressName" >
					<el-input v-model="orderData.tradeNo" auto-complete="off" :disabled="disable" ></el-input>
				</el-form-item>
				<el-col :span="8" >
					<el-form-item label="快递" prop="expressName">
						<el-select v-model="orderData.expressName" placeholder="请选择" filterable >
							<el-option
									v-for="item in expressOptions"
									:key="item.name"
									:label="item.name"
									:value="item.name"
									:disabled="item.status == 0">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="16">
					<el-form-item label="快递单号" prop="expressTrade">
						<el-input v-model="orderData.expressTrade" auto-complete="off"></el-input>
					</el-form-item>
				</el-col>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="sendDialogVisible = false">取消</el-button>
				<el-button type="primary" @click.native="sendSubmit" :loading="sendLoading">提交</el-button>
			</div>
		</el-dialog>


	</section>
</template>
<script>
	import {getOrderData,updateOrder,deleteOrder,getAllExpress,saveSendGoods,refundOrder,rejectOrder}  from "../../api/api";
	export default {
		data(){
			return{
				filters:{
					tradeNo:''
				},
				list:[],
				listLoading:false,
				pager:{
					page:1,
					limit:16,
					totalRow:0,
					totalPage:1,
					sizes:[16,24,48]
				},
				status:["未付款","已付款(待发货)"," 已发货","待评价","已完成","已取消"],
				refundState:["无","有"],
				disable:true,
				detailsVisible:false,
				activeNames:"1",
				orderData:{
					id:0,
					status:0,
					expressName:'',
					expressTrade:''
				},
				sendDialogVisible:false,
				expressOptions:[],
				sendLoading:false,
				sendModelRules: {
					expressName: [
						{ required: true, message: '请选择快递公司', trigger: 'blur' }
					],
					expressTrade: [
						{ required: true, message: '请输入快递单号', trigger: 'blur' }
					],
				},
				refundData:{
					id:0,
					refundState:'',
					refuseDesc:''
				},
				rejectVisible:false,
				rejectLoading:false
			}
		},
		mounted(){
			this.getOrders()
			this.loadExpressOptions()
		},
		methods:{
			handleSizeChange(val){
				this.pager.limit = val
				this.getOrders();
			},
			handleCurrentChange(val) {
				this.pager.page = val;
				this.getOrders()
			},
			getOrders(){
				let that = this
				that.listLoading = true
				getOrderData({
					page:this.pager.page,
					limit:this.pager.limit
				}).then(resp=>{
					that.listLoading = false
					if(resp.data.code == 200){
						that.list = resp.data.data.list
						that.pager.totalRow = resp.data.data.totalRow
						that.pager.totalPage = resp.data.data.totalPages
					}else{
						that.$message({
							type:'error',
							message:resp.data.msg
						})
					}
				})
			},
			loadExpressOptions(){
				getAllExpress().then(resp=>{
					if(resp.data.code == 200){
						this.expressOptions = resp.data.data
					}
				})
			},
			handleReset(){
				this.filters = {tradeNo:''}
				this.pager = {currentPage:1}
				this.getOrders()
			},
			formatStatus: function(row){
				return this.status[row.status]
			},
			formatRefundState:function(row){
				return row.refundState == 1?'是':'否';
			},
			handleDetail(index,row){
				this.detailsVisible = true
				this.orderData = row
			},
			handleSend(index,row){
				this.sendDialogVisible = true
				this.orderData = row
			},
			sendSubmit(){
				this.$refs.orderData.validate((valid) => {
					if (valid) {
						let data = {
							id: this.orderData.id,
							status: 2,
							expressName: this.orderData.expressName,
							expressTrade: this.orderData.expressTrade
						}
						this.sendLoading = true
						saveSendGoods(data).then(resp => {
							this.sendLoading = false
							this.sendDialogVisible = false
							if (resp.code == 200) {
								this.$message({
									message: '发货成功',
									type: 'success'
								});
								this.getOrders()
							} else {
								this.$message({
									type: 'error',
									message: resp.data.msg
								})
							}
						})
					}
				})
			},
			handleFinish(index,row){
				let question = '确定要完成该订单吗？'
				let params  = {
					id: row.id,
					status: 4
				}
				this.$confirm(question, '提示', {}).then(() => {
					updateOrder(params).then((res) => {
						if(res.code == 200){
							//NProgress.done();
							this.$message({
								message: '订单已完成',
								type: 'success'
							});
							this.getOrders();
						}
					});
				})
			},
			handleDel(index,row){
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = { id: row.id };
					deleteOrder(para).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getOrders();
					});
				}).catch(() => {

				});
			},
			refundStateFormat(row){
				let state =  [
				 	'无' ,' 申请退款','已退款' , ' 拒绝退款'
				]
				return state[row.refundState]
			},
			handleRefund(index,row){
				this.refundData = row
				this.$confirm('确认审核通话吗?', '提示', {
					type: 'warning'
				}).then(() => {
					row.refundState = 2
					refundOrder(this.refundData).then(resp=>{
						if(resp.code == 200){
							this.$message({
								message: '退款通过成功',
								type: 'success'
							});
						}else{
							row.refundState = 1
							this.$message({
								message: '退款通过失败',
								type: 'error'
							});
						}
					})
				})
			},
			handleReject(index,row){
				this.refundData = row
				this.rejectVisible = true
			},
			rejectSubmit(){
				this.rejectLoading = true
				let param = {
					id : this.refundData.id,
					orderId:this.refundData.orderId,
					goodsSpecId:this.refundData.goodsSpecId,
					productId:this.refundData.productId,
					refundState:3,
					refuseDesc:this.refundData.refuseDesc
				}
				rejectOrder(param).then(resp=>{
					this.rejectLoading = false;
					this.rejectVisible = false
					if(resp.code == 200){
						this.$message({
							message: '驳回成功',
							type: 'success'
						});
						this.refundData.refundState = 3
					}else{
						this.$message({
							message: '驳回失败',
							type: 'error'
						});
					}
				})
			},
			renderImage(url){
				return this.imageService + url
			}
		}
	}
</script>
